Enhancing ShopSite Checkout for International Customers

The current version of ShopSite displays the state-selection list as a dropdown box on the checkout screen, and this can cause confusion for international customers who are unsure which to select. The most common workaround for this issue is to add “other” to the list of states under Commerce -> States and Countries, but a more seamless solution would be following javascript code that changes the state dropdown to a text entry field when a country other than the United States or Canada is selected:

<script type="text/javascript">

ss_jQuery(function($){
  var d=document,w=window,f=d.billing, checkState=function(e){
     var ship=(this.name != 'Country'),
       state=((ship && f.ShipState) || f.State),
       country=((ship&&f.ShipCountry) || f.Country),
       hstate=((ship&&f.hiddenShipState)||f.hiddenState);
    if(typeof state != 'undefined' && state.type == 'select-one'){
       if(!/^(United States|Canada)$/.test($(country).val())){
                var hname=hstate.name,name=state.name;
                $(hstate).attr('name',name).show();
                $(state).attr('name',hname).hide();
       }
     } else {
        if(/^(United States|Canada)$/.test($(country).val())){
               var hname=hstate.name,name=state.name;
               $(hstate).attr('name',name).show();
               $(state).attr('name',hname).hide();
        }
     }
   };

   if(f.State && f.State.type == 'select-one'){
       $('<input class="addr" type="text" name="hiddenState" value="" size="28" maxlength="30">').hide().insertAfter(f.State);
       $(f.Country).change(checkState).change()
   }
   if(f.ShipState && f.ShipState.type == 'select-one'){
      $('<input class="addr" type="text" name="hiddenShipState" value="" size="28" maxlength="30">').hide().insertAfter(f.ShipState);
      $(f.ShipCountry).change(checkState).change();
   }
});

</script>

You would add this code before the closing </body> tag in the [– DEFINE Shipping –] section of your Shopping Cart template. If you are a hosted client of Lexiconn and you need assistance integrating the code, feel free to contact us and we can put it in place for you.

Looking for a web host that understands ecommerce and business hosting?
Check us out today!

Leave a Reply